<template>
  <div id="previewPay">
    <div class="title"></div>
    <div class="content">
      <div id="payRollCenter" class="pay_roll_center">
        <div class="title">Run Payroll : {{$route.query.scheduleName}}<span v-touch-ripple class="close_icon" @click="$router.back()">X</span></div>
        <div class="d_panel_content">
          <el-row class="d_panel_top" v-if="previewPayCostObj">
            <el-col class="pay_roll_pie_chart_title" :span="5">
              <div class="name">Review and Submit</div>
            </el-col>
            <el-col :span="6" id="payRollPieChart" class="pay_roll_pie_chart"></el-col>
            <el-col :span="6" class="pay_roll_pie_chart_legend">
              <div class="legend_item" v-forv-for="(item,key) in previewPayCostObj.payList" :key="key" >
                <span class="circle" :style="{ backgroundColor: payChartColor[key]}"></span><span class="money">${{item.value?parseFloat(item.value).toFixed(2):""}}</span>
                <div class="name">{{item.name}}</div>
              </div>
            </el-col>
            <el-col :span="7" class="run_area">
              <div>{{previewPayCostObj.payCheckCount?previewPayCostObj.payCheckCount:""}} Paper check for {{previewPayCostObj.payUnit?previewPayCostObj.payUnit:""}} {{previewPayCostObj.payTotal?previewPayCostObj.payTotal:""}}</div>
              <div>Deliver these paychecks by {{previewPayCostObj.payDate?previewPayCostObj.payDate:""}}</div>
            </el-col>
          </el-row>

          <div class="table_content">
            <el-row class="table_operator" v-if="previewPayCostObj">
              <el-col :span="6" :offset="13">
                Pay Period: {{previewPayCostObj.periodStart?previewPayCostObj.periodStart:""}} to {{previewPayCostObj.periodEnd?previewPayCostObj.periodEnd:""}}
          </el-col>
              <el-col :span="4" style="text-align: right">
                Pay Date: {{previewPayCostObj.payDate?previewPayCostObj.payDate:""}}
          </el-col>
            </el-row>
            <el-table v-if="previewPayList" ref="payTable"
                      :data="previewPayList"
                      border
                      emptyText="No Data"
                      @selection-change=""
                      @sort-change=""
                      @row-dblclick="tableDbClick"
                      @selection-change = "">
              <!--<div slot="empty">
                <i class="iconfont" style="font-size: 30px;vertical-align:middle;margin-right: 4px">&#xe619;</i> no Data !
              </div>-->
              <template v-for="(value,key) in personTableColumn"  >
                <el-table-column :key="value.name"
                                 :show-overflow-tooltip = 'true'
                                 :prop="value.name"
                                 :label="value.title"
                                 height="auto"
                                 :min-width="value.width?value.with:100"
                                 :sortable = "value.isSortable ? 'custom':false"
                                 inline-template>
                  <div>
                <span v-if="value.name=='name'">
                    {{row[value.name]?row[value.name]:""}}
                </span>
                    <span v-else-if="value.name=='payRate'">
                    {{row.unit?row.unit:""}}
                    {{row[value.name]?''+row[value.name]:""}}
                    {{row.payRange?'/ '+row.payRange:""}}
                </span>
                    <span v-else>
                  {{ row[value.name]}}
                </span>
                  </div>
                </el-table-column>
              </template>
            </el-table>
            <!--分页-->
            <div v-show="previewPayList" style="text-align:right;margin-top:10px" v-if="previewPayListPb&&previewPayListPb.pageDataCount>1">
              <el-pagination
                @size-change="tableChangePageSize"
                @current-change="tableChangePage"
                :current-page='parseInt(previewPayListPb.pageNo)'
                :page-sizes="[5, 10, 20, 30]"
                :page-size='parseInt(previewPayListPb.pageSize)'
                layout="total, sizes, prev, pager, next, jumper"
                :total='parseInt(previewPayListPb.pageDataCount)'>
              </el-pagination>
            </div>
            <div class="btn_group">
              <el-button @click="$router.back()">Back</el-button>
              <el-button type="primary" @click="submit">Submit Payroll</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import dPanel from '../../components/common/Panel.vue';

  export default {
    components:{
      dPanel
    },
    data:function(){
      return{
        payChartColor:['#3fa4eb','#00c9c6','#ffb900'],
        pieChart:null,
        personTableColumn:[
          {title:'NAME',name:'name'},
          {title:'TOTAL HOURS',name:'totalHour'},
          {title:'TOTAL PAY',name:'totalPay'},
          {title:'EMPLOYEE TAXES AND DEDUCTIONS',name:'cost'},
          {title:'NET PAY',name:'netPay'},
        ],
        page:{
          "pageNo":"1",
          "pageSize":"5"
        }
      }
    },
    computed:{
      /**
       * 支出情况数据
       */
      previewPayCostObj(){
        return this.$store.getters.previewPayCostObj;
      },
      /**
       * 员工表格数据
       */
      previewPayList(){
        return this.$store.getters.previewPayList;
      },
      /**
       * 员工表格分页数据
       */
      previewPayListPb(){
        return this.$store.getters.previewPayListPb;
      }
    },
    watch:{
      previewPayCostObj:function(value){
        if(value){
          this.$nextTick(function () {
            this.initPieChart();
          });
        }
      }
    },
    created:function () {
      this.init()
    },
    activated:function () {
      //this.init()
    },
    mounted:function(){
      this.$nextTick(function () {
        //this.initPieChart();
      });
    },
    methods:{
      init:function () {
        this.getPreviewPayList();
        this.getPreviewPayCost();
      },
      getPreviewPayList(){
        var route = this.$route;
        var param={
          personIds:route.query.personIds,
          periodStart:route.query.periodStart,
          periodEnd:route.query.periodEnd,
          scheduleId:route.params.id
        }
        this.$store.dispatch("getPreviewPayList",param);
      },
      getPreviewPayCost(){
        var route = this.$route;
        var param={
          personIds:route.query.personIds,
          periodStart:route.query.periodStart,
          periodEnd:route.query.periodEnd,
          scheduleId:route.params.id
        }
        this.$store.dispatch("getPreviewPayCost",param);
      },
      /**
       * 初始化并创建饼图
       */
      initPieChart:function(){
        $("#payRollPieChart").html("");
        var t = this;
        var width = 200,
        height = 200,
        radius = Math.min(width, height) / 2 - 10;

        var data = t.previewPayCostObj.payList;
        var color = t.payChartColor;
        if(!(data&&data.length==3&&data[0].value&&data[1].value&&data[2].value)){
          data = [ {name: 'empty', value: 1},]
          color = ['#ebebeb'];
        }
        var arc = d3.svg.arc()
          .outerRadius(radius - 10)
          .innerRadius(radius-40);
        var pie = d3.layout.pie()
          .sort(null)
          .value(function(d) {
            return d.value;
          });

        var svg = d3.select("#payRollPieChart").append("svg")
            .datum(pie(data))
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        svg.append('text').text("Total").attr("dy", "-.55em").attr("text-anchor","middle").style({'fill': '#3fa4eb'});
        svg.append('text').text("$"+t.previewPayCostObj.payTotal).attr("dy", "1em").attr("text-anchor","middle").style({'stroke': '#444'});

        var arcs = svg.selectAll("g.arc").data(pie).enter().append("g").attr("class", "arc");

        arcs.append("path")
            .attr("fill", function(d, i) {return color[i];}).transition().ease("bounce").duration(1000).attrTween("d", tweenPie)
            .transition().ease("elastic").delay(function(d, i) { return 2000 + i * 50; }).duration(550).attrTween("d", tweenDonut);

       // arcs.append("text")
          //  .attr("transform", function(d) {return "translate(" + arc.centroid(d) + ")";}).attr("dy", ".35em").attr("dx", "-.5em").style({'fill': '#fff'})
        //    .text(function(d) { return d.data.data.name; });

        function tweenPie(b) {
          b.innerRadius = 0;
          var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
          return function(t) { return arc(i(t)); };
        }

        function tweenDonut(b) {
          b.innerRadius = radius * .6;
          var i = d3.interpolate({innerRadius: 0}, b);
          return function(t) { return arc(i(t)); };
        }
      },
      /**
       * 双击表格事件
       */
      tableDbClick(row, event){
        var personId = row.personId;
        var periodStart = this.previewPayCostObj.periodStart;
        var periodEnd = this.previewPayCostObj.periodEnd;
        var scheduleName = this.previewPayCostObj.scheduleName;
        var scheduleId = this.$route.params.id;
        if(personId&&periodStart&&periodEnd&&scheduleName&&scheduleId){
          this.$router.push('/payRoll/payRollCenter/PayScheduleInfoEdit/previewPay/personPayDetail/'+scheduleId+'?personId='+personId+'&periodStart='+periodStart+'&periodEnd='+periodEnd+'&scheduleName='+ scheduleName);
        }
      },
      tableChangePageSize(pageSize){
        this.page.pageSize = pageSize;
        this.getPersons();
      },
      tableChangePage(pageNo){
        this.page.pageNo = pageNo;
        this.getPersons();
      },
      submit(){
        this.$router.push('/payRoll/payRollCenter/PayScheduleInfoEdit/previewPay/PayRollSetSuccess/' + this.$route.params.id+'?personIds='+this.$route.query.personIds);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  #previewPay{
    >.content{
      padding: 0;
    }
  }
  .pay_roll_center{
    .title {
      line-height: 40px;
      background-color: #ddd;
      padding: 0 12px;
      .close_icon {
        float: right;;
        cursor: pointer;
      }
    }
    .d_panel_content{
      .d_panel_top{
        padding: 10px 60px;
        .pay_roll_pie_chart_title{
          .name{
            line-height: 40px;
            color: #333;
            font-weight: bold;
            font-size: 18px;
          }
          .year{
            line-height: 30px;
            font-size: 16px;
            color: $activeColor;
          }
        }
        .pay_roll_pie_chart{

        }
        .pay_roll_pie_chart_legend{
          padding: 14px 20px;
          .legend_item{
            margin-bottom: 12px;
            .circle{
              display: inline-block;
              width: 18px;
              height: 18px;
              background-color: $activeColor ;
              border-radius: 50%;
              position: relative;
              vertical-align: middle;
              &:before{
                content: "";
                position: absolute;
                left: 5px;
                top: 5px;
                bottom: 5px;
                right: 5px;
                background-color: #fff;
                border-radius: 50%;
              }
            }
            .money{
              margin-left: 10px;
              font-size: 18px;
              color: #333;
              font-weight: bold;
            }
            .percent{
              margin-left: 20px;
              font-size: 14px;
              color: #666;
            }
            .name{
              line-height: 20px;
              padding-left: 30px;
              font-size: 12px;
              color: $activeColor;
            }
          }
        }
        .run_area{
          padding-top: 20px;
          line-height: 36px;
          text-align: right;
          .run_btn{
            padding: 0 30px;
          }
          .run_text{
            font-size: 12px;
            color: #666;
          }
        }
      }

      /*table ================start*/
      .table_content{
        padding: 0 20px;
        margin-bottom: 20px;
        .table_operator{
          margin-bottom: 10px;
        }

      }
      .btn_group{
        margin-top: 10px;
        line-height: 50px;
        text-align: right;
      }
      /*table ================end*/
    }
  }
</style>
